<template>
  <div class="profile-container">
    <div class="profile-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>个人信息</h1>
        <p>管理您的账号信息、订单和收货地址</p>
      </div>

      <!-- 主要内容区域 -->
      <div class="profile-content">
        <!-- 左侧导航 -->
        <div class="profile-sidebar">
          <div class="user-avatar-section">
            <div class="avatar-wrapper">
              <img
                :src="userInfo?.avatar || '/placeholder.svg'"
                :alt="userInfo?.nickname || '用户头像'"
                class="user-avatar"
              />
              <div class="avatar-upload" @click="handleAvatarUpload">
                <el-icon><Camera /></el-icon>
              </div>
            </div>
            <div class="user-basic-info">
              <h3>{{ userInfo?.nickname || userInfo?.username || '用户' }}</h3>
              <p>{{ userInfo?.email || userInfo?.phone || '' }}</p>
            </div>
          </div>

          <el-menu
            :default-active="activeTab"
            @select="handleTabChange"
            class="profile-menu"
          >
            <el-menu-item index="account">
              <el-icon><User /></el-icon>
              <span>账号信息</span>
            </el-menu-item>
            <el-menu-item index="orders">
              <el-icon><Document /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="addresses">
              <el-icon><Location /></el-icon>
              <span>收货地址</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 右侧内容区域 -->
        <div class="profile-main">
          <!-- 账号信息编辑 -->
          <div v-if="activeTab === 'account'" class="content-section">
            <div class="section-header">
              <h2>账号信息</h2>
              <el-button
                v-if="!isEditing"
                type="primary"
                @click="startEdit"
              >
                编辑信息
              </el-button>
            </div>

            <el-form
              ref="accountFormRef"
              :model="accountForm"
              :rules="accountRules"
              label-width="100px"
              class="account-form"
            >
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="accountForm.username"
                  :disabled="!isEditing"
                  placeholder="请输入用户名"
                />
              </el-form-item>

              <el-form-item label="昵称" prop="nickname">
                <el-input
                  v-model="accountForm.nickname"
                  :disabled="!isEditing"
                  placeholder="请输入昵称"
                />
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="accountForm.email"
                  :disabled="!isEditing"
                  placeholder="请输入邮箱"
                />
              </el-form-item>

              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="accountForm.phone"
                  :disabled="!isEditing"
                  placeholder="请输入手机号"
                />
              </el-form-item>

              <el-form-item v-if="isEditing" class="form-actions">
                <el-button type="primary" @click="saveAccount" :loading="saveLoading">
                  保存
                </el-button>
                <el-button @click="cancelEdit">取消</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 订单管理 -->
          <div v-else-if="activeTab === 'orders'" class="content-section">
            <div class="section-header">
              <h2>我的订单</h2>
              <el-button type="primary" @click="goToOrders">
                查看全部订单
              </el-button>
            </div>

            <div class="orders-summary">
              <div class="order-stats">
                <div class="stat-item">
                  <div class="stat-number">{{ orderStats.total }}</div>
                  <div class="stat-label">全部订单</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ orderStats.pending }}</div>
                  <div class="stat-label">待付款</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ orderStats.shipped }}</div>
                  <div class="stat-label">待收货</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ orderStats.completed }}</div>
                  <div class="stat-label">已完成</div>
                </div>
              </div>

              <div class="recent-orders">
                <h3>最近订单</h3>
                <div v-if="recentOrders.length === 0" class="empty-state">
                  <el-empty description="暂无订单" />
                </div>
                <div v-else class="order-list">
                  <div
                    v-for="order in recentOrders"
                    :key="order.id"
                    class="order-item"
                    @click="goToOrderDetail(order.id)"
                  >
                    <div class="order-info">
                      <div class="order-number">订单号：{{ order.orderNumber }}</div>
                      <div class="order-status">{{ getOrderStatusText(order.status) }}</div>
                    </div>
                    <div class="order-amount">¥{{ order.totalAmount?.toFixed(2) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 地址管理 -->
          <div v-else-if="activeTab === 'addresses'" class="content-section">
            <div class="section-header">
              <h2>收货地址</h2>
              <el-button type="primary" @click="addAddress">
                添加新地址
              </el-button>
            </div>

            <div class="addresses-list">
              <div v-if="addresses.length === 0" class="empty-state">
                <el-empty description="暂无收货地址" />
              </div>
              <div v-else class="address-grid">
                <div
                  v-for="address in addresses"
                  :key="address.id"
                  class="address-card"
                  :class="{ 'is-default': address.isDefault }"
                >
                  <div class="address-header">
                    <div class="address-name">
                      {{ address.receiverName }}
                      <el-tag v-if="address.isDefault" type="primary" size="small">默认</el-tag>
                    </div>
                    <div class="address-actions">
                      <el-button
                        v-if="!address.isDefault"
                        type="text"
                        size="small"
                        @click="setDefaultAddress(address)"
                      >
                        设为默认
                      </el-button>
                      <el-button
                        type="text"
                        size="small"
                        @click="editAddress(address)"
                      >
                        编辑
                      </el-button>
                      <el-button
                        type="text"
                        size="small"
                        @click="deleteAddress(address)"
                        class="delete-btn"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                  <div class="address-phone">{{ address.receiverPhone }}</div>
                  <div class="address-detail">
                    {{ address.fullAddress }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 头像上传对话框 -->
    <el-dialog v-model="showAvatarDialog" title="更换头像" width="400px">
      <div class="avatar-upload-dialog">
        <el-upload
          ref="uploadRef"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
        >
          <div class="upload-area">
            <el-icon class="upload-icon"><Plus /></el-icon>
            <div class="upload-text">点击上传头像</div>
          </div>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 地址编辑对话框 -->
    <el-dialog
      v-model="showAddressDialog"
      :title="addressDialogTitle"
      width="500px"
    >
      <el-form
        ref="addressFormRef"
        :model="addressForm"
        :rules="addressRules"
        label-width="80px"
      >
        <el-form-item label="收货人" prop="receiverName">
          <el-input v-model="addressForm.receiverName" placeholder="请输入收货人姓名" />
        </el-form-item>

        <el-form-item label="手机号" prop="receiverPhone">
          <el-input v-model="addressForm.receiverPhone" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item label="省份" prop="province">
          <el-input v-model="addressForm.province" placeholder="请输入省份" />
        </el-form-item>

        <el-form-item label="城市" prop="city">
          <el-input v-model="addressForm.city" placeholder="请输入城市" />
        </el-form-item>

        <el-form-item label="区县" prop="district">
          <el-input v-model="addressForm.district" placeholder="请输入区县" />
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="addressForm.address"
            type="textarea"
            :rows="3"
            placeholder="请输入详细地址"
          />
        </el-form-item>

        <el-form-item label="邮政编码" prop="postalCode">
          <el-input v-model="addressForm.postalCode" placeholder="请输入邮政编码" />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault" :true-label="1" :false-label="0">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showAddressDialog = false">取消</el-button>
        <el-button type="primary" @click="saveAddress" :loading="addressSaveLoading">
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  User,
  Document,
  Location,
  Camera,
  Plus
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { userApi } from '@/api/user'
import { addressApi, type Address, type CreateAddressRequest } from '@/api/address'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 当前激活的标签页
const activeTab = ref('account')

// 编辑状态
const isEditing = ref(false)
const saveLoading = ref(false)

// 表单引用
const accountFormRef = ref<FormInstance>()
const addressFormRef = ref<FormInstance>()

// 账号信息表单
const accountForm = reactive({
  username: '',
  nickname: '',
  email: '',
  phone: ''
})

// 账号信息验证规则
const accountRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  nickname: [
    { max: 50, message: '昵称长度不能超过 50 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ]
}

// 订单统计数据
const orderStats = reactive({
  total: 0,
  pending: 0,
  shipped: 0,
  completed: 0
})

// 最近订单
const recentOrders = ref<any[]>([])

// 地址管理
const addresses = ref<Address[]>([])
const showAddressDialog = ref(false)
const addressSaveLoading = ref(false)
const addressForm = reactive<CreateAddressRequest & { id?: number }>({
  receiverName: '',
  receiverPhone: '',
  province: '',
  city: '',
  district: '',
  address: '',
  postalCode: '',
  isDefault: 0
})

// 地址验证规则
const addressRules: FormRules = {
  receiverName: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' }
  ],
  receiverPhone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  province: [
    { required: true, message: '请输入省份', trigger: 'blur' }
  ],
  city: [
    { required: true, message: '请输入城市', trigger: 'blur' }
  ],
  district: [
    { required: true, message: '请输入区县', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ]
}

// 头像上传相关
const showAvatarDialog = ref(false)
const uploadUrl = '/api/upload/avatar'
const uploadHeaders = computed(() => ({
  Authorization: `Bearer ${userStore.token}`
}))

// 省市区选项（简化版，实际项目中应该从API获取）
const regionOptions = ref([
  {
    value: 'beijing',
    label: '北京市',
    children: [
      {
        value: 'beijing',
        label: '北京市',
        children: [
          { value: 'chaoyang', label: '朝阳区' },
          { value: 'haidian', label: '海淀区' },
          { value: 'dongcheng', label: '东城区' }
        ]
      }
    ]
  }
])

// 地址对话框标题
const addressDialogTitle = computed(() => {
  return addressForm.id ? '编辑地址' : '添加地址'
})

// 初始化账号信息
const initAccountForm = () => {
  if (userInfo.value) {
    accountForm.username = userInfo.value.username || ''
    accountForm.nickname = userInfo.value.nickname || ''
    accountForm.email = userInfo.value.email || ''
    accountForm.phone = userInfo.value.phone || ''
  }
}

// 处理标签页切换
const handleTabChange = (key: string) => {
  // 如果点击的是订单，直接跳转到订单页面
  if (key === 'orders') {
    router.push('/orders')
    return
  }

  activeTab.value = key

  // 根据不同标签页加载对应数据
  switch (key) {
    case 'addresses':
      loadAddresses()
      break
  }
}

// 开始编辑
const startEdit = () => {
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  initAccountForm() // 恢复原始数据
}

// 保存账号信息
const saveAccount = async () => {
  if (!accountFormRef.value) return

  try {
    await accountFormRef.value.validate()
    saveLoading.value = true

    // 检查用户信息是否存在
    if (!userStore.userInfo?.userId) {
      ElMessage.error('用户信息不存在')
      return
    }

    // 调用API保存用户信息
    const response = await userApi.updateProfile(userStore.userInfo.userId, accountForm)

    if (response.code === 200) {
      // 更新store中的用户信息
      userStore.setUser(response.data)
      ElMessage.success('保存成功')
      isEditing.value = false
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error: any) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败，请重试')
  } finally {
    saveLoading.value = false
  }
}

// 跳转到订单页面
const goToOrders = () => {
  router.push('/orders')
}

// 跳转到订单详情
const goToOrderDetail = (orderId: string) => {
  router.push(`/orders/${orderId}`)
}

// 获取订单状态文本
const getOrderStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待付款',
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 加载订单数据
const loadOrderData = async () => {
  try {
    // 这里应该调用实际的API
    // const response = await orderApi.getOrderStats()
    // orderStats = response.data.stats
    // recentOrders.value = response.data.recentOrders

    // 模拟数据
    Object.assign(orderStats, {
      total: 15,
      pending: 2,
      shipped: 1,
      completed: 12
    })

    recentOrders.value = [
      {
        id: '1',
        orderNumber: 'XM202401001',
        status: 'completed',
        totalAmount: 299.00
      },
      {
        id: '2',
        orderNumber: 'XM202401002',
        status: 'shipped',
        totalAmount: 199.00
      }
    ]
  } catch (error) {
    console.error('加载订单数据失败:', error)
  }
}

// 加载地址列表
const loadAddresses = async () => {
  if (!userStore.userInfo?.userId) return

  try {
    const response = await addressApi.getUserAddresses(userStore.userInfo.userId)
    addresses.value = response.data
  } catch (error) {
    console.error('加载地址失败:', error)
    ElMessage.error('加载地址失败')
  }
}

// 添加地址
const addAddress = () => {
  // 重置表单
  Object.assign(addressForm, {
    id: undefined,
    receiverName: '',
    receiverPhone: '',
    province: '',
    city: '',
    district: '',
    address: '',
    postalCode: '',
    isDefault: 0
  })
  showAddressDialog.value = true
}

// 编辑地址
const editAddress = (address: Address) => {
  Object.assign(addressForm, {
    id: address.id,
    receiverName: address.receiverName,
    receiverPhone: address.receiverPhone,
    province: address.province,
    city: address.city,
    district: address.district,
    address: address.address,
    postalCode: address.postalCode || '',
    isDefault: address.isDefault
  })
  showAddressDialog.value = true
}

// 保存地址
const saveAddress = async () => {
  if (!addressFormRef.value) return

  try {
    await addressFormRef.value.validate()
    addressSaveLoading.value = true

    if (!userStore.userInfo?.userId) {
      ElMessage.error('用户信息不存在')
      return
    }

    if (addressForm.id) {
      // 更新地址
      await addressApi.updateAddress(userStore.userInfo.userId, addressForm.id, {
        receiverName: addressForm.receiverName,
        receiverPhone: addressForm.receiverPhone,
        province: addressForm.province,
        city: addressForm.city,
        district: addressForm.district,
        address: addressForm.address,
        postalCode: addressForm.postalCode,
        isDefault: addressForm.isDefault
      })
    } else {
      // 创建地址
      await addressApi.createAddress(userStore.userInfo.userId, {
        receiverName: addressForm.receiverName,
        receiverPhone: addressForm.receiverPhone,
        province: addressForm.province,
        city: addressForm.city,
        district: addressForm.district,
        address: addressForm.address,
        postalCode: addressForm.postalCode,
        isDefault: addressForm.isDefault
      })
    }

    ElMessage.success('保存成功')
    showAddressDialog.value = false
    loadAddresses() // 重新加载地址列表
  } catch (error: any) {
    console.error('保存地址失败:', error)
    ElMessage.error('保存失败，请重试')
  } finally {
    addressSaveLoading.value = false
  }
}

// 删除地址
const deleteAddress = async (address: Address) => {
  try {
    await ElMessageBox.confirm('确定要删除这个地址吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    if (!userStore.userInfo?.userId) {
      ElMessage.error('用户信息不存在')
      return
    }

    await addressApi.deleteAddress(userStore.userInfo.userId, address.id)
    ElMessage.success('删除成功')
    loadAddresses() // 重新加载地址列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除地址失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 设置默认地址
const setDefaultAddress = async (address: Address) => {
  try {
    if (!userStore.userInfo?.userId) {
      ElMessage.error('用户信息不存在')
      return
    }

    await addressApi.setDefaultAddress(userStore.userInfo.userId, address.id)
    ElMessage.success('设置成功')
    loadAddresses() // 重新加载地址列表
  } catch (error) {
    console.error('设置默认地址失败:', error)
    ElMessage.error('设置失败')
  }
}

// 头像上传相关方法
const handleAvatarUpload = () => {
  showAvatarDialog.value = true
}

const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像图片只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

const handleAvatarSuccess = (response: any) => {
  if (response.code === 200) {
    // 更新用户头像
    userStore.updateAvatar(response.data.url)
    ElMessage.success('头像更新成功')
    showAvatarDialog.value = false
  } else {
    ElMessage.error(response.message || '上传失败')
  }
}

const handleAvatarError = () => {
  ElMessage.error('头像上传失败，请重试')
}

// 组件挂载时初始化数据
onMounted(() => {
  initAccountForm()
})
</script>

<style scoped>
.profile-container {
  min-height: calc(100vh - 200px);
  background-color: #f5f5f5;
  padding: 20px 0;
}

.profile-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  font-size: 14px;
}

.profile-content {
  display: flex;
  gap: 20px;
}

.profile-sidebar {
  width: 280px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.user-avatar-section {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.avatar-upload {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #ff6900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-size: 12px;
}

.user-basic-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.user-basic-info p {
  color: #666;
  font-size: 14px;
}

.profile-menu {
  border: none;
}

:deep(.el-menu-item) {
  border-radius: 6px;
  margin-bottom: 5px;
}

:deep(.el-menu-item.is-active) {
  background-color: #fff2e8;
  color: #ff6900;
}

.profile-main {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.account-form {
  max-width: 500px;
}

.form-actions {
  margin-top: 30px;
}

.orders-summary {
  margin-top: 20px;
}

.order-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #ff6900;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.recent-orders h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.order-list {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.order-item:hover {
  background-color: #f8f9fa;
}

.order-item:last-child {
  border-bottom: none;
}

.order-info {
  flex: 1;
}

.order-number {
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.order-status {
  color: #666;
  font-size: 14px;
}

.order-amount {
  font-size: 16px;
  font-weight: 600;
  color: #ff6900;
}

.addresses-list {
  margin-top: 20px;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.address-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s;
}

.address-card:hover {
  border-color: #ff6900;
  box-shadow: 0 2px 8px rgba(255, 105, 0, 0.1);
}

.address-card.is-default {
  border-color: #ff6900;
  background-color: #fff8f5;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.address-name {
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.address-actions {
  display: flex;
  gap: 10px;
}

.delete-btn {
  color: #f56c6c !important;
}

.address-phone {
  color: #666;
  margin-bottom: 8px;
}

.address-detail {
  color: #333;
  line-height: 1.5;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

.avatar-upload-dialog {
  text-align: center;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-area:hover {
  border-color: #ff6900;
}

.upload-icon {
  font-size: 32px;
  color: #ccc;
  margin-bottom: 10px;
}

.upload-text {
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }

  .profile-sidebar {
    width: 100%;
  }

  .order-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .address-grid {
    grid-template-columns: 1fr;
  }
}
</style>
